<div class="row justify-content-center pt-2">
  <div class="text-center col">
    <h1 class="h3">Template-driven Forms</h1>
    <h2 class="h3">Init</h2>
    <hr>
  </div>
</div>
<div class="row justify-content-center p-2">
  <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
    Country : {{ country | json }}<br>
    Actor : {{ actor | json }}<br>
    movie : {{ movie | json }}<br>
    movieAny : {{ movieAny | json }}<br>
  </div>
  <div class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
    <div class="card">
      <div class="card-header text-center">
        <h4>Item Form</h4>
      </div>
      <div class="card-body">
        <form>
          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="name">Country</label>
              <input type="text" class="form-control" name="country" id="country" [(ngModel)]="country">
            </div>
            <div class="form-group col-md-6">
              <label for="name">Actor</label>
              <input type="text" class="form-control" name="actor" id="actor" [(ngModel)]="actor">
            </div>
          </div>
          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="movieName">Movie</label>
              <input type="text" class="form-control" name="movieName" id="movieName" [(ngModel)]="movie.name">
            </div>
            <div class="form-group col-md-6">
              <label for="movieAnyName">Movie Any</label>
              <input type="text" class="form-control" name="movieAnyName" id="movieAnyName" [(ngModel)]="movieAny.name">
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>